<template>
  <div class="detail">
    <DetailNav ref="navRef" @navClick='navClick' />
    <Scroll class='container' ref="scrollRef" :probe-type='3' @scroll='contentScroll'>
      <DetailSwiper :top-images='topimages' />
      <DetailBaseInfo :goods='goods' />
      <DetailShopInfo :shop='shop' />
      <DetailGoodsInfo :detail-info='detailInfo' @imgLoad='imgLoad' />
      <DetailParansInfo ref="paramsRef" :params-info='paramInfo' />
      <DetailCommentInfo ref='commentRef' :comment-info='commentInfo' />
      <GoodsList ref="recommendRef" :goods='recommendList' />
    </Scroll>
    <DeailBottom @addCar='addCar' />
    <BackTop @click.native='backTopClick' v-show='isBackShow' />
  </div>
</template>

<script>
import DetailNav from './childComps/detailNav'

import Scroll from 'components/common/scroll/Scroll'
import DetailSwiper from './childComps/detailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParansInfo from './childComps/DetailParamInfo'
import GoodsList from 'components/content/goods/GoodsList'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DeailBottom from './childComps/DetailBottom'
import { getdetail, getrecommend, Goods, Shop, GoodsParam } from 'network/detail'
import { itemMixin } from 'common/mixin'
export default {
  name: 'detail',
  components: {
    DetailNav,
    DetailSwiper,
    Scroll,
    DetailBaseInfo,
    DeailBottom,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParansInfo,
    GoodsList,
    DetailCommentInfo
  },
  mixins: [itemMixin],

  data() {
    return {
      iid: '',
      goods: {},
      shop: {},
      topimages: [],
      detailInfo: {},
      paramInfo: {},
      recommendList: [],
      commentInfo: [],
      offsetList: [],
      len: 0,
      curIdx: 0
    }
  },
  created() {
    this.iid = this.$route.params.id

    this.loaddetail(this.iid)
    this.getrecommend()
  },
  methods: {
    imgLoad() {
      let arr = []
      let ele = this.$refs
      ele.scrollRef.refresh()
      arr.push(0)

      arr.push(ele.paramsRef.$el.offsetTop)
      arr.push(ele.commentRef.$el.offsetTop)
      arr.push(ele.recommendRef.$el.offsetTop)

      arr.push(Number.MAX_VALUE)
      this.offsetList = arr
      this.len = arr.length - 1
    },
    addCar() {
      let product = {}
      product.iid = this.iid
      product.desc = this.goods.desc
      product.title = this.goods.title
      product.newPrice = this.goods.realPrice
      product.imgURL = this.topimages[0]

      this.$store.dispatch('addTocar', product).then(res => {
        this.$toast.show(res)
      })
    },
    contentScroll(y) {
      this.isBackShow = y > 1000
      for (let i = 0; i < this.len; i++) {
        if (this.curIdx !== i && y >= this.offsetList[i] && y < this.offsetList[i + 1]) {
          this.$refs.navRef.curIdx = i
          this.curIdx = i
        }
      }
    },
    navClick(i) {
      this.$refs.scrollRef.scrollTo(0, -this.offsetList[i], 500)
    },
    loaddetail(iid) {
      getdetail(iid).then(res => {
        // console.log(res);
        const data = res.result
        this.topimages = data.itemInfo.topImages
        // console.log(this.Topimages);
        // 获取商品信息
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
        // 获取店铺信息
        this.shop = new Shop(data.shopInfo)
        // console.log(this.shop);
        // 4.保存商品的详情数据
        this.detailInfo = data.detailInfo
        // 5.获取参数的信息
        this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
        // 获取评论信息
        if (data.rate.cRate !== 0) {
          this.commentInfo = data.rate.list
          // console.log(this.commentInfo);
        }
      })
    },
    // 获取推荐数据
    getrecommend() {
      getrecommend().then(res => {
        this.recommendList = res.data.list
      })
    }
  }
}
</script>

<style scoped>
.detail {
  position: relative;
  height: 100vh;
}
.container {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>